<template>
  <div>
    <myheader></myheader>
    <br />
    <Breadcrumb :datas="datas"></Breadcrumb>
    <section class="featured-block text-center">

      <div style="text-align:left;padding-left:720px">

        商品名称：<input type="text" v-model="name" class="input1" value="good.name"><br /><br />

        商品类别：<Select v-model="cid" :datas="cate_list" class="select"></Select><br /><br />

        商品标签：<TagInput class="taginput" v-model="mytags" type="string" split="," placeholder="请输入标签，输入完毕后按回车确认"></TagInput><br /><br />

        商品颜色：<input type="text" v-model="color" placeholder="请输入商品颜色" class="input1" value="color"><br /><br />

        商品大小：<input type="text" v-model="size" placeholder="请输入商品颜色" class="input1" value="size"><br /><br />

        <!-- <div style="width:370px">
          商品描述：<textarea rows="5" maxlength="200" @input="descinput" placeholder="请输入商品描述" v-model="desc"></textarea><br />
          <span style="color:#909399;float:right">限制输入200字，已输入{{ text_length }}字</span><br /><br />
        </div> -->

        商品价格：<input type="text" v-model="price" placeholder="请输入商品价格" class="input1" value="price"><br /><br />

        商品头图：<input type="file" @change="upload_img" class="input1">
        <img :src="src" :width='200' fit='file' v-if="src"><br /><br />

        演示视频：<input type="file" @change="upload_video" class="input1">
        <video width="300" height="200" :src="src1" controls v-if="src1"> </video><br /><br /><br />

        商品描述：
        <div style="width:800px;margin-left:70px;margin-top:-25px">
          <quill-editor ref="myTextEditor" :content="content" @change="cosChange"></quill-editor><br />
        </div>
      </div>
      <Button color='blue' @click="submit" style="margin-left:-80px">点击添加</Button>
    </section>
    <myfooter></myfooter>
  </div>
</template>

<script>
import myheader from './header';
import myfooter from './footer';
import { config } from '../config'
import { quillEditor } from 'vue-quill-editor';
// 引入编辑器样式
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
  components: {
    myheader: myheader,
    myfooter: myfooter,
    quillEditor: quillEditor,
  },
  data() {
    return {
      datas: [{ title: "首页", route: { name: "index" } }, { title: "修改商品" }],
      cate_list: [],
      name: '',
      desc: '',
      color: '',
      size: '',
      cid: '',
      price: '',
      src: '',
      src1: '',
      my_video: '',
      my_img: '',
      text_length: 0,
      cate_id: {},
      // 商品标签变量
      mytags: '',
      // 存储编辑器的信息
      content: '',
    }
  },

  mounted() {
    this.get_good();
    this.axios({
      url: config['baseurl'] + "goodslist/",
    }).then(resp => {
      console.log(resp.data.cate)
      for (let i = 0, len = resp.data.cate.length; i < len; i++) {
        this.cate_list.push(resp.data.cate[i]['cname'])

        // 反向赋值
        this.cate_id[resp.data.cate[i]['cname']] = resp.data.cate[i]['id']

      }
      this.cid = resp.data.cate[0]['cname']
    })
  },
  methods: {
    // 获取商品信息
    get_good() {
      this.axios({
        url: config['baseurl'] + 'goodinfo/',
        params: {
          gid: this.$route.query.gid
        }
      }).then(resp => {
        console.log(resp)
        // 赋值
        this.name = resp.data.good.name
        this.price = resp.data.good.price
        this.src = config['uploadurl'] + resp.data.good.img
        this.src1 = config['uploadurl'] + resp.data.good.video
        console.log(resp.data.good.desc)
        this.content = resp.data.good.desc
        var param = resp.data.good.param
        // 将字符串强转成集合
        param = JSON.parse(param)
        this.color = param.color
        this.size = param.size
      })
      this.axios({
        url: config['baseurl'] + 'gettags/',
        params: {
          gid: this.$route.query.gid
        }
      }).then(resp => {
        console.log(resp)
        this.mytags = resp.data.tags.join(',')

      })
	},
	
	// 提交文件内容
    submit() {
      // 将字典形式转换成字符串类型
      let parms = {};
      parms['param'] = this.parms;
      parms['color'] = this.color;
      parms['size'] = this.size;
      // 将json数据转成字符串
      parms = JSON.stringify(parms)
      // console.log(parms)
      // 将字符串转成json
      // parms = JSON.parse(parms)

      let formdata = new FormData()
      if (this.name === "") {
        this.$Message('商品名不能为空')
        return
      } else if (this.desc === "") {
        this.$Message('商品描述不能为空')
        return
      } else if (this.price === "") {
        this.$Message('商品价格不能为空')
        return
      } else if (this.my_img === "") {
        this.$Message('商品图片不能为空')
        return
      } else if (this.my_video === "") {
        this.$Message('商品视频不能为空')
        return
      }
      formdata.append('name', this.name)
      formdata.append('cid', this.cate_id[this.cid])
      formdata.append('param', parms)
      formdata.append('desc', this.desc)
      formdata.append('price', this.price)
      formdata.append('img', this.my_img)
      formdata.append('video', this.my_video)

      this.axios({
        url: 'http://127.0.0.1:8000/goodslist/',
        method: 'post',
        data: formdata
      }).then(resp => {
        this.$Message(resp.data.message)
        console.log(resp)
        // this.$router.go(-1)
        if (resp.data.gid) {
          this.axios({
            url: 'http://127.0.0.1:8000/inserttags/',
            params: {
              gid: resp.data.gid,
              tags: this.mytags
            }
          }).then(resp => {
            console.log(resp)
            // this.$router.go(-1)
          })
        }

      })
	},
	
	// 图片文件上传
    upload_img: function (e) {
      // 声明文件对象
      let file = e.target.files[0];
      // 声明参数类型
      let param = new FormData();
      // 添加文件
      param.append("file", file);
      // 声明上传文件头部
      let config = { "Content-Type": "multipart/form-data" };
      // 发送请求
      this.axios({
        url: "http://127.0.0.1:8000/uploadgoodfile/",
        method: "post",
        data: param, config,
      }).then(resp => {
        console.log(resp);
        this.src = "http://127.0.0.1:8000/static/upload/" + resp.data.filename;
        this.my_img = resp.data.filename;
      })
	},
	
	// 视频文件上传
    upload_video: function (e) {
      // 声明文件对象
      let file = e.target.files[0];
      // 声明参数类型
      let param = new FormData();
      // 添加文件
      param.append("file", file);
      // 声明上传文件头部
      let config = { "Content-Type": "multipart/form-data" };
      // 发送请求
      this.axios({
        url: "http://127.0.0.1:8000/uploadgoodfile/",
        method: "post",
        data: param, config,
      }).then(resp => {
        console.log(resp);
        this.src1 = "http://127.0.0.1:8000/static/upload/" + resp.data.filename;
        this.my_video = resp.data.filename;
      })
	},
	cosChange({editor, html, text}){
		console.log(editor)
		console.log(html)
		console.log(text)
	}
  }
}
</script>

<style>
.taginput {
  margin-left: 70px;
  margin-top: -25px;
  width: 300px;
}
.select {
  width: 370px;
  padding-left: 70px;
  margin-top: -25px;
}
textarea {
  width: 300px;
}
.input1 {
  width: 300px;
}
</style>